<template>
  <view style="padding-bottom: 2vh;">
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="text-orange"> 请选择课程</text>
      </view>
      <!-- <view class="cu-form-group">
        <view class="title">日期选择</view>
        <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
          <view class="picker">
            {{ date }}
          </view>
        </picker>
      </view> -->
      <view class="action">
        <button class="cu-btn bg-green shadow" @tap="NumSteps">{{ accomplish }}</button>
      </view>
    </view>
    <view class="bg-white padding">
      <!-- <view class="cu-steps"> -->
      <view class="grid col-4">
        <view v-for="(item,index) in numList" :key="index" class="text-center" :class="index == num?'text-blue':''">
          <view class="cuIcon-roundcheckfill" />
          <view :data-index="item.id" :data-ind="index" @tap="NumStep">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <!-- <view class="cu-bar bg-white margin-top">
      <view class="action">
        <text class="cuIcon-title text-orange "></text> 对话窗口
      </view>
      <view class="action">
        <button class="cu-btn bg-green shadow" @tap="showModal" data-target="DialogModal1">Dialog</button>
      </view>
    </view> -->
    <!-- 已选警告弹窗 -->
    <view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">取消选课</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red" />
          </view>
        </view>
        <view class="padding-xl">您确定取消该课程？</view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn bg-gray margin-left" @tap="cancelClassSelectionCancel">No</button>
            <button class="cu-btn bg-green margin-left" @tap="cancelClassSelection">Yes</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 课程详情弹窗 -->
    <view class="cu-modal" :class="modalName1 == 'kecModal1'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">课程详情</view>
          <view class="action" @tap="hideModal1">
            <text class="cuIcon-close text-red" />
          </view>
        </view>

        <!-- 详情 -->
        <view class="padding-tb-sm">
          <view class="text-black text-lg">{{ xqList.fdSubjectName }}</view>
          <view class="text-cut padding-tb-sm">
            <block v-for="(item,index) in xqList.fdTeacherNames">
              <view class="cu-tag round bg-orange sm">{{ item }}</view>
            </block>
          </view>
          <!-- 内容 -->
          <view class="padding-lr-sm">
            {{ xqList.fdIntroduction }}
          </view>
          <!-- 备注 -->
          <view class="padding-sm">
            {{ xqList.fdRemarks }}
          </view>
          <!-- 上课时间 -->
          <view class="">
            {{ xqList.fdSubjectStartTime }}
            <!-- 教室 -->
          </view>
          <view class="">
            Address：{{ xqList.fdClassroomAddress }}, {{ xqList.fdClassroomName }}
            <!-- 教室 -->
          </view>
          <!-- -->
        </view>

        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn bg-gray margin-left" :data-subjectid="xqList.fdSubjectId" @tap="cancelClassSelection1">取消选课</button>
            <button class="cu-btn bg-green margin-left" :data-xkid="xqList.fdId" :data-fdname="xqList.fdSubjectName" @tap="xianModal">选课</button>
          </view>
        </view>
      </view>
    </view>
    <!--课程-->
    <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">
        <text class="text-orange " /> 本时段课程
      </view>
    </view>
    <view class="cu-list menu-avatar" style="margin-bottom: 53px;">
      <view
        v-for="(schedule,index) in scheduleList"
        :key="index"
        class="cu-item"
        :data-fdcode="schedule.fdIndex"
        :data-fdid="schedule.fdId"
        :data-states="schedule.check"
        data-target="DialogModal1"
        style="height: 220upx;"
        @tap="pitchOnSchedule"
      >
        <view class="cu-avatar round lg bg-cyan">课</view>
        <view class="content">
          <view class="text-grey">
            {{ schedule.fdSubjectName }}
          </view>
          <view class="text-gray text-sm flex">
            <view class="text-cut">
              <block v-for="(item,index) in schedule.fdTeacherNames">
                <view class="cu-tag round bg-orange sm">{{ item }}</view>
              </block>
            </view>
          </view>
        </view>
        <view class="action">
          <view v-show="schedule.check" class="cu-tag round bg-red sm">选</view>
        </view>
      </view>
      <block v-if="scheduleList == ''">
        <view class="stern" style="text-align: center; margin: 30rpx 0rpx;">没有更多了...</view>
      </block>

    </view>
  </view>
</template>

<script>
	import {
		dateFormat
	} from 'utils/dateUtil'
	import {
		getClassSchedule,
		courseRegistration,
		cancelRegistration
	} from 'api/curricula/index'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				modalName: null,
				modalName1: null,
				check: false, // 已选课标识
				partI: false, // partI选课标识
				basics: 0,
				radio: 'A',
				numList: [{
					id: '2019-12-11 19:00:00',
					name: '12/11'
				}, {
					id: '2019-12-12 07:30:00',
					name: '12/12(早)'
				}, {
					id: '2019-12-12 09:30:00',
					name: '12/12(中)'
				}, {
					id: '2019-12-12 19:00:00',
					name: '12/12(晚)'
				}],
				num: 0,
				scroll: 0,
				date: dateFormat('YYYY-mm-dd', new Date()),
				scheduleList: [],
				xqList: '',
				subjectId: '',
				scheduleid: 0,
				accomplish: '完成'
			}
		},
		created() {
			// this.getSchedule(0)
			this.getSchedule(this.numList[0].id)
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 取消课程警告弹窗
			hideModal(e) {
				this.modalName = null
			},
			// 课程详情弹窗
			hideModal1() {
				this.modalName1 = null
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			// BasicsSteps() {
			// 	this.basics= this.basics === this.basicsList.length - 1 ? 0 : this.basics + 1
			// },
			NumSteps() {
				// this.num= this.num === this.numList.length - 1 ? 0 : this.num + 1
				// if (this.num === 3) {
				// 	this.accomplish = '完成'
				// } else if (this.num === 0) {
				uni.redirectTo({
					url: '/pages/signup/person'
				})
				// }
				// this.getSchedule(this.num)
			},
			// 点击选中时间段获取数据
			NumStep(e) {
				this.num = e.currentTarget.dataset.ind
				this.getSchedule(e.currentTarget.dataset.index)
			},
			ScrollSteps() {
				this.scroll = this.scroll === 9 ? 0 : this.scroll + 1
			},
			DateChange(e) {
				this.date = e.detail.value
				const data = {
					timeType: this.numList[0].id
				}
				getClassSchedule(data).then(res => {
					if (res.data.allSubjects != null) {
						this.scheduleList = res.data.allSubjects
						this.num = 0
						this.accomplish = '下一步'
					}
					if (res.data.selectSubject != null) {
						this.scheduleid = res.data.selectSubject.fdSubject.fdId
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取课程数据
			getSchedule(val) {
				const studentId = uni.getStorageSync('userId')
				getClassSchedule(val, studentId).then(res => {
					console.log('获取时间段课程', res.data)
					if (res.data != null) {
						this.scheduleList = res.data.list
						this.check = res.data.check
						this.partI = res.data.partI
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 添加选中课程
			pitchOnSchedule(e) {
				for (const i in this.scheduleList) {
					if (this.scheduleList[i].fdId === e.currentTarget.dataset.fdid) {
						this.xqList = this.scheduleList[i]
						this.modalName1 = 'kecModal1'
					}
				}
				// if (e.currentTarget.dataset.fdcode !== uni.getStorageSync('userLanguage') && e.currentTarget.dataset.fdcode !== 'all') {
				if (e.currentTarget.dataset.states == 1) {
					this.modalName1 = 'kecModal1'
					// this.modalName = e.currentTarget.dataset.target
				} else {

				}
			},
			// 点击选课添加课程
			xianModal(e) {
				const data = {
					studentId: uni.getStorageSync('userId'),
					scheduleId: e.currentTarget.dataset.xkid
					// title:e.currentTarget.dataset.fdcode
				}
				const name = e.currentTarget.dataset.fdname
				// 判断VIP课程
				if (name.indexOf('VIP')>-1) {
					this.modalName1 = null
					uni.showToast({
						title: 'VIP/义工课，不可选！',
						duration: 500,
						mask: true,
						icon: 'none'
					})
					return false
				}

				// 判断 是否选择第一部分
				if (name.indexOf('第二部分') > -1 || name.indexOf('Part II') > -1) {
					// 如果为false
					if (!this.partI) {
						this.modalName1 = null
						uni.showToast({
							title: '请先选择第一部分！',
							duration: 500,
							mask: true,
							icon: 'none'
						})
						return false
					}
				}
				if (this.check) {
					this.modalName1 = null
					uni.showToast({
						title: '您已选本时段课程！',
						duration: 500,
						mask: true,
						icon: 'none'
					})
					return false
				}
				courseRegistration(data).then(res => {
					if (res.data != null) {
						if (e.currentTarget.dataset.xkid != null) {
							this.scheduleid = e.currentTarget.dataset.xkid
						}
					} else {
						if (res.meta.code == 20000) {
							this.modalName1 = ''
							uni.showToast({
								title: '报名成功',
								duration: 500,
								mask: true,
								icon: 'success'
							})
							this.getSchedule(this.numList[this.num].id)
						} else {
							this.modalName1 = ''
							uni.showToast({
								title: res.meta.message,
								duration: 500,
								mask: true,
								icon: 'none'
							})
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 取消选课
			cancelClassSelection1(e) {
				this.modalName1 = null
				this.modalName = 'DialogModal1'
				this.subjectId = e.currentTarget.dataset.subjectid
			},
			cancelClassSelection(e) {
				this.modalName1 = null
				this.modalName = 'DialogModal1'

				const data = {
					studentId: uni.getStorageSync('userId'),
					subjectId: this.subjectId
				}

				cancelRegistration(data).then(res => {
					if (res.meta.code == 20000) {
						this.modalName = null
						this.modalName1 = ''
						uni.showToast({
							title: '取消报名成功',
							duration: 500,
							mask: true,
							icon: 'success'
						})
						this.getSchedule(this.numList[this.num].id)
					} else {
						this.modalName = null
						this.modalName1 = ''
						uni.showToast({
							title: res.meta.message,
							duration: 500,
							mask: true,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancelClassSelectionCancel() {
				this.modalName1 = null
				this.modalName = null
			}
		}
	}
</script>

<style>

</style>
